<template>
  <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <!--  员工简单列表负责人渲染  -->
        <el-option v-for="item in list" :key="item.id" :value="item.username" :label="item.username" />

      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getUserData } from '@/api/employees.js'
import { addDepartment, getDepartmentDetails, putDepartment } from '@/api/department.js'
export default {
  props: {
    // 父传子收
    id: {
      type: String,
      required: true
    },
    controllerForm: {
      type: Boolean,
      required: true
    },
    // 做对行数据校验使用
    orangeLIst: {
      type: Array,
      required: true
    }
  },
  data() {
    // 自定义的表单验证
    const validCode = (rule, value, callback) => {
      // 如果当前输入的部门编码在项目的数据中(this.originList )已经存在,提示用户从新输入
      let putorangeLIst = this.orangeLIst.map(item => item.code)
      // console.log(putorangeLIst)
      // console.log(putorangeLIst)
      if (this.controllerForm) {
        /* 进入这里面  就是编辑状态 利用filter 吧当前被点击的元素id去除在外,
        然后在利用  map() 取到剩余数组的id */
        putorangeLIst = this.orangeLIst.filter(item => item.id !== this.id).map(item => item.code)
        // console.log('看一看', putorangeLIst)
      }
      //   includes() 这个方法返回值  false ||true
      if (putorangeLIst.includes(value)) {
        // 存在  提示
        callback(new Error(`该部门编码:${value}已存在,请重新输入`))
      } else {
        // 不存在不提示直接放行
        callback()
      }
    }
    const validName = (rule, value, callback) => {
      // 添加状态
      // 因为当前数据 父级的id 对应于子级的pid 先利用filter()取出来对应父级的pid  然后在利用map()只取出name做判断
      let putorangeName = this.orangeLIst.filter(item => item.pid === this.id).map(item => item.name)
      if (this.controllerForm) {
        // 获取当前被点击的元素,  在获取这个元素的pid
        const pid = this.orangeLIst.find(item => item.id === this.id).pid
        // 遍历每一个元素的pid === 被点击元素的pid,然后再把自己当前被点击的呢个去除掉, 最后在取name
        putorangeName = this.orangeLIst.filter(item => item.pid === pid).filter(item => item.id !== this.id).map(item => item.name)

        // console.log('看一看putorangeName', putorangeName)
        // console.log('pid', pid)
      }
      // console.log('putorangeName', putorangeName)
      if (putorangeName.includes(value)) {
        // 名称重复
        callback(new Error(`该部门名称:${value}已存在,请从新输入`))
      } else {
        // 名称不重复
        callback()
      }
    }
    return {
      form: {
        // 收集表单的数据
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: ''// 部门介绍
      },
      // 表单的校验
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 15, message: '请输入长度是1~~15的部门名称', trigger: 'blur' },
          { validator: validName, trigger: 'blur' || 'change' }
        ], // 部门名称
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 15, message: '请输入长度是1~~15的部门编码', trigger: 'blur' },
          { validator: validCode, trigger: 'blur' || 'change' }
        ], // 部门编码
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ], // 部门管理者
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 15, message: '请输入长度是1~~50的部门介绍', trigger: 'blur' }
        ]
      },
      list: [] // 员工简单列表数据存储
    }
  },
  created() {
    // 页面加载 调用获取员工简单列表函数
    this.loadGetUserData()
    // 判断当前是否属于编辑状态
    if (this.controllerForm) {
      // 是编辑状态   页面加载 调用根据id查询部门详情函数
      this.loadDepartmentDetails()
    }
  },
  methods: {
    // 发送请求获取员工简单列表函数
    async loadGetUserData() {
      try {
        const res = await getUserData()
        // console.log(res)
        if (res.code !== 10000) return
        this.list = res.data // 保存数据
      } catch (error) {
        console.log('获取员工简单列表函数error', error)
      }
    },
    // 根据id查询部门详情函数
    async  loadDepartmentDetails() {
      try {
        const res = await getDepartmentDetails(this.id)
        // 把获取到的数据进行数据回显
        this.form = res.data // 保存数据数据回显
        // console.log(res)
      } catch (error) {
        console.log('根据id查询部门详情函数error', error)
      }
    },
    // 添加子部门
    async  hAdd() {
      try {
        //  表单数据都有了 但是还缺少一个pid , pid在当前数据中就是一个字组件id的值可进行父传子收数据
        // 把父组件传递过来的id 利用展开运算符...  进行所有数据的传送
        const res = await addDepartment({ pid: this.id, ...this.form })
        // console.log(res)
        if (res.code !== 10000) return
        this.$message.success(res.message)
        // 再抛出一个事件给父组件,让父组件进行数据的更新渲染,在关闭 Dialog弹层
        this.$emit('success')
      } catch (error) {
        console.log('添加子部门error', error)
      }
    },
    // 编辑子部门 根据  对应的部门数据进行对应数据的修改
    async  eEitor() {
      try {
        const res = await putDepartment(this.form)
        console.log(res)
        if (res.code !== 10000) return
        this.$message.success(res.message)
        // 再抛出一个事件给父组件,让父组件进行数据的更新渲染,在关闭 Dialog弹层
        this.$emit('success')
      } catch (error) {
        console.log('根据id修改部门详情error', error)
      }
    },
    // 点击确定
    hSubmit() {
      this.$refs.deptForm.validate((valid) => {
        if (!valid) return // 校验失败
        // 三元判断  值是            true ||  false
        this.controllerForm ? this.eEitor() : this.hAdd()
      })
    },
    // 点击了取消
    hCancel() {
      // 再抛出一个事件给父组件,让父组件进行数据的更新渲染,在关闭 Dialog弹层
      this.$emit('success')
    }
  }
}
</script>
